
<!-- shooting_game/frontend/about.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>关于我 - 校园创意工作室</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://fonts.loli.net/css?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/animation.css">
  <style>
    .chalk-text {
      font-family: 'Ma Shan Zheng', cursive;
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    .chalk-border {
      border: 3px dashed rgba(255,255,255,0.3);
    }
    .chalk-drawing {
      background-image: url('images/chalkboard.png');
      background-size: cover;
      background-position: center;
    }
    .badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 50px;
      font-size: 0.8rem;
      margin-right: 0.5rem;
      margin-bottom: 0.5rem;
    }
    .timeline-item::before {
      content: '';
      position: absolute;
      left: -1.5rem;
      top: 0;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      background: white;
    }
  </style>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="particles-js" class="fixed inset-0 z-0"></div>

  <!-- 导航栏 -->
  <nav class="relative z-10 bg-white bg-opacity-90 shadow-md">
    <div class="container mx-auto px-6 py-4">
      <div class="flex items-center justify-between">
        <div class="text-2xl font-bold text-pink-500">🎨 校园创意社</div>
        <div class="hidden md:flex space-x-8">
          <a href="index.html" class="nav-item transition duration-300 text-blue-600 font-medium">🏠 首页</a>
          <a href="works.html" class="nav-item transition duration-300 text-green-600 font-medium">📚 作品集</a>
          <a href="#" class="nav-item transition duration-300 text-purple-600 font-medium">👨‍🎓 关于我</a>
          <a href="contact.html" class="nav-item transition duration-300 text-yellow-600 font-medium">📮 联系我</a>
        </div>
        <button class="md:hidden focus:outline-none">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>

  <!-- 主内容区 -->
  <main class="relative z-10 pt-10 pb-20">
    <div class="container mx-auto px-4">
      <!-- 黑板报标题 -->
      <div class="chalk-drawing rounded-xl p-8 mb-16 text-center">
        <h1 class="chalk-text text-4xl md:text-6xl font-bold mb-6 animate-bounce">👨‍🎓 关于创作者</h1>
        <p class="chalk-text text-xl max-w-2xl mx-auto">用创意描绘校园生活，用设计记录青春时光 ✏️</p>
      </div>

      <!-- 个人介绍黑板 -->
      <div class="max-w-4xl mx-auto">
        <div class="chalk-drawing rounded-xl p-8 md:p-12 mb-12">
          <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/3 mb-8 md:mb-0">
              <div class="w-48 h-48 mx-auto rounded-full bg-gradient-to-r from-pink-500 to-yellow-500 flex items-center justify-center text-6xl chalk-border">
                🎨
              </div>
            </div>
            <div class="md:w-2/3 md:pl-10">
              <h2 class="chalk-text text-3xl font-bold mb-4">张小明</h2>
              <p class="chalk-text text-lg mb-4 leading-relaxed">
                毕业于XX大学艺术学院数字媒体专业，校园创意工作室创始人，热爱一切与创意相关的事物。
              </p>
              <p class="chalk-text text-lg mb-6 leading-relaxed">
                擅长插画设计、UI/UX设计、视频制作等多个领域，带领团队完成过多个校园创意项目。
              </p>
              <div class="flex flex-wrap">
                <span class="badge bg-pink-100 text-pink-800">插画设计</span>
                <span class="badge bg-blue-100 text-blue-800">UI/UX</span>
                <span class="badge bg-purple-100 text-purple-800">视频制作</span>
                <span class="badge bg-green-100 text-green-800">平面设计</span>
                <span class="badge bg-yellow-100 text-yellow-800">动画制作</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 时间线 -->
        <div class="chalk-drawing rounded-xl p-8 md:p-12 mb-12">
          <h2 class="chalk-text text-3xl font-bold mb-8 text-center">📅 创意历程</h2>
          
          <div class="relative pl-8">
            <!-- 时间线项目1 -->
            <div class="timeline-item relative mb-8 pb-8 border-b border-dashed border-white border-opacity-30">
              <h3 class="chalk-text text-2xl font-bold mb-2">校园创意社成立</h3>
              <p class="chalk-text text-yellow-200 mb-2">2023年9月</p>
              <p class="chalk-text">
                在大学二年级时成立了校园创意社，聚集了一群热爱创意设计的同学，开始了我们的创意之旅。
              </p>
            </div>
            
            <!-- 时间线项目2 -->
            <div class="timeline-item relative mb-8 pb-8 border-b border-dashed border-white border-opacity-30">
              <h3 class="chalk-text text-2xl font-bold mb-2">首届校园艺术展</h3>
              <p class="chalk-text text-yellow-200 mb-2">2024年3月</p>
              <p class="chalk-text">
                策划并举办了校园首届数字艺术展，展出社团成员的作品，获得校内外广泛好评。
              </p>
            </div>
            
            <!-- 时间线项目3 -->
            <div class="timeline-item relative mb-8 pb-8 border-b border-dashed border-white border-opacity-30">
              <h3 class="chalk-text text-2xl font-bold mb-2">校园APP设计大赛冠军</h3>
              <p class="chalk-text text-yellow-200 mb-2">2024年6月</p>
              <p class="chalk-text">
                带领团队设计的校园生活APP获得全校设计大赛一等奖，作品被学校官方采用。
              </p>
            </div>
            
            <!-- 时间线项目4 -->
            <div class="timeline-item relative">
              <h3 class="chalk-text text-2xl font-bold mb-2">创意工作室成立</h3>
              <p class="chalk-text text-yellow-200 mb-2">2025年1月</p>
              <p class="chalk-text">
                毕业后正式成立校园创意工作室，继续用创意服务校园，记录青春。
              </p>
            </div>
          </div>
        </div>

        <!-- 技能展示 -->
        <div class="chalk-drawing rounded-xl p-8 md:p-12">
          <h2 class="chalk-text text-3xl font-bold mb-8 text-center">🛠️ 技能专长</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <!-- 技能1 -->
            <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-2xl text-white mr-4">🎨</div>
                <h3 class="chalk-text text-xl font-bold">插画设计</h3>
              </div>
              <p class="chalk-text">
                擅长手绘和数字插画，作品风格多样，能够根据需求创作不同风格的插画作品。
              </p>
              <div class="mt-4">
                <div class="w-full bg-gray-700 rounded-full h-2.5">
                  <div class="bg-pink-500 h-2.5 rounded-full" style="width: 90%"></div>
                </div>
              </div>
            </div>
            
            <!-- 技能2 -->
            <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-2xl text-white mr-4">📱</div>
                <h3 class="chalk-text text-xl font-bold">UI/UX设计</h3>
              </div>
              <p class="chalk-text">
                专注于用户体验设计，能够设计出美观且易用的界面，提升产品使用体验。
              </p>
              <div class="mt-4">
                <div class="w-full bg-gray-700 rounded-full h-2.5">
                  <div class="bg-blue-500 h-2.5 rounded-full" style="width: 85%"></div>
                </div>
              </div>
            </div>
            
            <!-- 技能3 -->
            <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-2xl text-white mr-4">🎥</div>
                <h3 class="chalk-text text-xl font-bold">视频制作</h3>
              </div>
              <p class="chalk-text">
                从策划、拍摄到后期剪辑全流程掌握，能够制作高质量的宣传片和微电影。
              </p>
              <div class="mt-4">
                <div class="w-full bg-gray-700 rounded-full h-2.5">
                  <div class="bg-purple-500 h-2.5 rounded-full" style="width: 80%"></div>
                </div>
              </div>
            </div>
            
            <!-- 技能4 -->
            <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm p-6 rounded-lg">
              <div class="flex items-center mb-4">
                <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-2xl text-white mr-4">✏️</div>
                <h3 class="chalk-text text-xl font-bold">平面设计</h3>
              </div>
              <p class="chalk-text">
                擅长海报、宣传册等平面设计，对排版和色彩有独到见解，作品富有视觉冲击力。
              </p>
              <div class="mt-4">
                <div class="w-full bg-gray-700 rounded-full h-2.5">
                  <div class="bg-green-500 h-2.5 rounded-full" style="width: 88%"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 页脚 -->
  <footer class="relative z-10 bg-gray-800 text-white py-10">
    <div class="container mx-auto px-4">
      <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-6 md:mb-0">
          <div class="text-2xl font-bold text-pink-400">校园创意社</div>
          <p class="mt-2 text-gray-400">用创意点亮校园生活</p>
        </div>
        <div class="flex space-x-6">
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📱 微信</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🐦 微博</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">📧 邮箱</a>
          <a href="#" class="text-gray-300 hover:text-white transition duration-300">🎵 B站</a>
        </div>
      </div>
      <div class="mt-8 pt-6 border-t border-gray-700 text-center text-gray-400">
        <p>© 2025 校园创意工作室 版权所有</p>
      </div>
    </div>
  </footer>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="js/main.js"></script>
  <script>
    // 粒子效果初始化
    particlesJS('particles-js', {
      particles: {
        number: { value: 60, density: { enable: true, value_area: 800 } },
        color: { value: "#ffffff" },
        shape: { type: "circle" },
        opacity: { value: 0.5, random: true },
        size: { value: 3, random: true },
        line_linked: { enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 2, direction: "none", random: true, straight: false, out_mode: "out" }
      }
    });

    // 移动端菜单切换
    document.querySelector('button.md-hidden').addEventListener('click', function() {
      const nav = document.querySelector('.hidden.md\\:flex');
      nav.classList.toggle('hidden');
      nav.classList.toggle('flex');
      nav.classList.toggle('flex-col');
      nav.classList.toggle('absolute');
      nav.classList.toggle('top-16');
      nav.classList.toggle('left-0');
      nav.classList.toggle('right-0');
      nav.classList.toggle('bg-white');
      nav.classList.toggle('p-4');
      nav.classList.toggle('space-y-4');
      nav.classList.toggle('space-x-8');
      nav.classList.toggle('shadow-md');
    });
  </script>
</body>
</html>
